page {
	background-color: rgba(217, 217, 217, .1);
	height: 100vh;
}

.ipt-box {
	display: flex;
	width: 95%;
	margin: 20rpx auto;

	.ipt {	
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		margin: auto;
		border-radius: 40rpx;
		background-color: rgba(217, 217, 217, .3);
	}
}

.swiper-box {
	width: 95%;
	height: 250rpx;
	margin: auto;

	image {
		width: 100%;
		height: 280rpx;
	}
}

.menu-box {
	width: 95%;
	margin: 50rpx auto;
	display: flex;
	justify-content: space-between;
	overflow-x: auto;

	.menu-item {
		width: 100rpx;
		margin: 0 23rpx;

		image {
			display: block;
			width: 60rpx;
			height: 60rpx;
			margin: auto;
		}

		view {
			width: 100rpx;
			height: 50rpx;
			font-size: 14rpx;
			text-align: center;
			color: #828282;
		}
	}
}

.recommend-box {
	width: 95%;
	margin: 20rpx auto;

	.rcmd-box {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: space-between;
		overflow-x: auto;
		overflow-y: hidden;

		.rcmd-item:first-child {
			margin: 0;
		}

		.rcmd-item {
			width: 200rpx;
			height: 250rpx;
			margin: 0 10rpx;
			position: relative;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 15rpx;
			}

			view {
				width: 200rpx;
				height: 80rpx;
				font-size: 14rpx;
				text-align: center;
				color: #828282;
			}

			span {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 14rpx;
				color: #fff;
				background-color: rgba(217, 217, 217, .5);
				padding: 0 10rpx;
				border-radius: 10rpx;
			}
		}
	}
}

.toplist-box {
	width: 95%;
	margin: 20rpx auto;

	.tpl-box {
		width: 100%;
		height: 400rpx;
		display: flex;
		overflow-x: auto;

		.tpl-item {
			width: 100%;
			height: 400rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.tpl-title {
				margin: 20rpx 40rpx;
				font-size: 28rpx;
				font-weight: 600;
			}

			.tpl-detail {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.tpl-song {
					display: flex;
					margin: 10rpx 40rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}

					b {
						line-height: 80rpx;
						color: #ba8d25;
						margin: 0 30rpx;
						font-size: 30rpx;
						font-weight: 600;
					}

					.song-box {

						view {
							color: #535353;
							font-size: 30rpx;
							font-weight: 600;
						}

						span {
							color: #bdbdbd;
							font-size: 20rpx;
						}
					}
				}
			}
	}
	} 
}

// 公共
.box-title {
	font-size: 30rpx;
	font-weight: 600;
	margin-bottom: 20rpx;
}
